<template>
  <div class="main-cnt" v-if="isLoginReload">
    <el-config-provider :locale="zhCn">
      <router-view v-slot="{ Component }">
        <keep-alive :include="['home','login']" :exclude="['VersionUpdate']">
          <component :is="Component"/>
        </keep-alive>
      </router-view>
    </el-config-provider>
  </div>
</template>

<script setup>
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {nextTick, provide, ref} from "vue";
import {useDark, useToggle} from "@vueuse/core";

const isDark = useDark()
const toggleDark = useToggle(isDark)

const isLoginReload = ref(true)

const reload = async () => {
  isLoginReload.value = false
  await nextTick()
  isLoginReload.value = true
  console.log("登录重新加载页面")
}
provide("reload", reload)
provide("dark",toggleDark)
provide("isDark",isDark)
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
}

.main-cnt{
  background: var(--el-bg-color);
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}

::-webkit-scrollbar {

  width: 6px;
  height: 6px;
  transition: all 2s;
}

::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}

::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #1A9B92;
  color: #1A9B92 !important;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  outline: 0;
  color: #1A9B92;
  background-color: var(--el-menu-item-hover);
}

.el-dropdown-menu__item:not(.is-disabled):focus {
  color: #1A9B92;
  background-color: #DFEFEC;
}

.el-dropdown-menu__item:not(.is-disabled):focus .el-icon {
  color: #1A9B92;
}

.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
  color: #1A9B92;
}

.el-link:hover {
  color: #1A9B92;
}

.el-menu--popup {
  min-width: 180px;
}

/*#app .el-button:focus {*/
/*  color: var(--el-button-text-color);*/
/*  border-color: var(--el-button-border-color);*/
/*  background-color: var(--el-button-bg-color);*/
/*}*/


/*el-radio-group样式*/
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: #1A9B92;
}

.el-radio-button__inner:hover {
  color: #1A9B92;
}

/*分页*/
.el-pager li.is-active, .el-pager li:hover {
  color: #1A9B92;
}

.show-popper .el-menu--popup, .user-popper .el-menu--popup {
  min-width: 100px !important;
}

.confirmButton {
  background: #00A298 !important;
  border: 1px solid #1A9B92 !important;
}

.confirmButton:hover {
  color: #00A298 !important;
  border: 1px solid #00A298 !important;
  background-color: #DFEFEC !important;
}

.el-message__icon {
  font-size: 18px !important;
}


.el-input {
  --el-input-focus-border-color: #00A298 !important;
}

.more-popper {
  transition: unset;
}

.user-popper {
  transition: unset;
}

.version-header .el-dialog__header {
  padding: 3rem !important;
  padding-bottom: 1rem !important;
  margin-right: 6rem;
}

.version-header .el-dialog__body {
  padding: 3rem !important;
  padding-top: 1rem !important;
}

.el-link.is-underline:hover:after {
  border-bottom: unset !important;
}
</style>
